<template>
  <div class="f-upload">
    <template
      v-if="widget.type == 'IconControl' || widget.type == 'SealControl'"
    >
      <div class="f-upload_box" :style="`width: ${size}px;height: ${size}px;`">
        <el-icon :size="30" color="#999999">
          <Plus />
        </el-icon>
      </div>
    </template>
    <template v-else>
      <el-input v-model="viewModel" placeholder="选择附件" :size="size">
        <template #append>
          <el-button type="primary">上传附件</el-button>
        </template>
      </el-input>
    </template>
  </div>
</template>

<script>
export default {
  model: {
    prop: "dataModel",
    event: "change",
  },
  props: {
    widget: {},
    dataModel: {},
    size: {},
  },
  data() {
    return {
      async: false,
      viewModel: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      if (this.dataModel) {
        this.viewModel = this.dataModel;
      }
      this.async = true;
    },
  },
};
</script>
<style lang="scss">
.f-upload {
  .f-upload_box {
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 1px dashed #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
  }
}
</style>